<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="card mb-20 user-header">
			<view class="flex align-center">
				<image src="/static/avatar.jpg" mode="aspectFill" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
				<view style="margin-left: 30rpx;">
					<text class="block" style="font-size: 36rpx; font-weight: bold;">用户名</text>
					<text class="block  mt-10">ID: 123456</text>
				</view>
			</view>
		</view>
		
		<!-- 我的订单 -->
		<view class="card mb-20">
			<view class="flex justify-between align-center mb-20">
				<text class="title">我的订单</text>
				<text class="text-primary" @click="goToOrder">查看全部 ></text>
			</view>
			
			<view class="grid grid-col-4 text-center">
				<view class="grid-item p-20" @click="goToOrderStatus(1)">
					<text class="iconfont icon-wait-pay" style="font-size: 50rpx; color: #ff9500;"></text>
					<text class="block mt-10">待付款</text>
					<text class="text-red mt-10">2</text>
				</view>
				<view class="grid-item p-20" @click="goToOrderStatus(2)">
					<text class="iconfont icon-paid" style="font-size: 50rpx; color: #5856d6;"></text>
					<text class="block mt-10">已付款</text>
					<text class="text-red mt-10">3</text>
				</view>
				<view class="grid-item p-20" @click="goToOrderStatus(3)">
					<text class="iconfont icon-used" style="font-size: 50rpx; color: #4cd964;"></text>
					<text class="block mt-10">已完成</text>
					<text class="text-gray mt-10">10</text>
				</view>
				<view class="grid-item p-20" @click="goToOrderStatus(4)">
					<text class="iconfont icon-refund" style="font-size: 50rpx; color: #ff2d55;"></text>
					<text class="block mt-10">退款</text>
					<text class="text-gray mt-10">1</text>
				</view>
			</view>
		</view>
		
		<!-- 我的工具 -->
		<view class="card mb-20">
			<view class="tool-item flex justify-between align-center p-20 mb-20" @click="goToPage('/pages/coupon/index')">
				<view class="flex align-center">
					<text class="iconfont icon-coupon" style="font-size: 40rpx; color: #ff9500; margin-right: 20rpx;"></text>
					<text>优惠券</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="tool-item flex justify-between align-center p-20 mb-20" @click="goToPage('/pages/collection/index')">
				<view class="flex align-center">
					<text class="iconfont icon-collect" style="font-size: 40rpx; color: #ff2d55; margin-right: 20rpx;"></text>
					<text>我的收藏</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="tool-item flex justify-between align-center p-20" @click="goToPage('/pages/setting/index')">
				<view class="flex align-center">
					<text class="iconfont icon-setting" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>设置</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		
		<!-- 使用自定义tabbar组件 -->
		<custom-tabbar :current-index="2"></custom-tabbar>
	</view>
</template>

<script>
// 引入自定义tabbar组件
	import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				tabBarList: [
					{ icon: 'icon-home', text: '首页' },
					{ icon: 'icon-order', text: '订单' },
					{ icon: 'icon-user', text: '我的' }
				]
			}
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			goToOrder() {
				uni.navigateTo({
					url: '/pages/order/index'
				})
			},
			goToOrderStatus(status) {
				uni.navigateTo({
					url: '/pages/order/index?status=' + status
				})
			}
		}
	}
</script>

<style>
	.user-header {
		background: #4caf50;
		color: #fff;
		position: relative;
		overflow: hidden;
	}
	
	.user-header::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
		transform: rotate(30deg);
	}
	
	.user-header .block:first-child {
		font-size: 36rpx;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
		position: relative;
	}
	
	.user-header .text-gray {
		opacity: 0.9;
		font-size: 28rpx;
		position: relative;
	}
	
	.grid {
		display: flex;
		flex-wrap: wrap;
	}
	
	.grid-col-4 .grid-item {
		width: 25%;
		box-sizing: border-box;
	}
	
	.tool-item {
		border-bottom: 1rpx solid #eee;
	}
	
	.tool-item:last-child {
		border-bottom: none;
	}
	
	.tab-bar .tab-item.active {
		color: #007AFF;
	}
</style>